<template>
  <div class="grid grid-rows-2 grid-cols-3 justify-items-center items-center">
    <el-card :shadow="current===i?'never':'hover'"
    :class="{'bg-gray-100 shadow-inner':current===i}"
    class="self-end cursor-pointer w-full"
    @click.native="current = i"
    v-for="i in [1,2,3]"
    >
      <img
        :src="require(`@/assets/cp_type/${i}.png`)" 
        class="object-contain m-auto"
        alt="icon"
      />
    </el-card>
    <el-card shadow="never" class="bg-gray-100 w-full overflow-hidden col-span-3 shadow-inner self-start">
      <p class="font-bold text-purple-600">{{CodeToType[showdata.type]}}</p>
      <p class="">
        <span class="mr-2 text-green-600 truncate">USE：{{showdata.use}}</span>
        <span class="text-red-600 truncate">NO：{{showdata.no}}</span>
      </p>
    </el-card>
  </div>
  <!-- <el-card shadow="never" class="w-9/0 mx-auto my-1">
    <div class="flex">
      <img 
        :src="require(`@/assets/cp_type/${type}.png`)" 
        class="object-contain"
        alt="icon"
      />
      <div class="flex-1 ml-5">
        <p class="font-bold text-purple-600">{{CodeToType[type]}}</p>
        <p class="">
          <span class="mr-2 text-green-600 truncate">USE：{{use}}</span>
          <span class="text-red-600 truncate">NO：{{no}}</span>
        </p>
      </div>
    </div>
  </el-card> -->
</template>

<script>
import { CodeToTypeShallow } from '@/conf'
export default{
  props:['listdata'],
  data(){
    return{
      CodeToType:Object.freeze(CodeToTypeShallow),
      current:1,
    }
  },
  computed:{
    showdata(){
      const { listdata,current } = this
      return listdata.find(e=>e.type == current)
    }
  }
}
</script>

<style>
</style>
